<script setup>
import { ref, onMounted } from 'vue'

// 设置选项数据
const settings = ref({
  notifications: {
    pushEnabled: true,
    healthReminder: true,
    activityNotice: true,
    systemMessage: true
  },
  privacy: {
    shareHealthData: false,
    locationService: true,
    dataCollection: true
  },
  display: {
    darkMode: false,
    fontSize: 'medium', // small, medium, large
    language: 'zh_CN'
  },
  about: {
    version: '1.0.0',
    buildNumber: '20230601'
  }
})

// 用户信息
const userInfo = ref(null)

onMounted(() => {
  // 从本地存储加载设置
  loadSettings()
  // 获取用户信息
  try {
    userInfo.value = uni.getStorageSync('userInfo') || {}
  } catch (e) {
    console.error('获取用户信息失败', e)
  }
})

// 加载设置
function loadSettings() {
  try {
    const savedSettings = uni.getStorageSync('userSettings')
    if (savedSettings) {
      settings.value = JSON.parse(savedSettings)
    } else {
      // 如果没有保存的设置，使用默认设置并保存
      saveSettings()
    }
  } catch (e) {
    console.error('加载设置失败', e)
  }
}

// 保存设置
function saveSettings() {
  uni.setStorageSync('userSettings', JSON.stringify(settings.value))
}

// 切换开关设置
function toggleSetting(category, key) {
  settings.value[category][key] = !settings.value[category][key]
  saveSettings()
  
  // 显示提示
  uni.showToast({
    title: settings.value[category][key] ? '已开启' : '已关闭',
    icon: 'none'
  })
}

// 选择字体大小
function selectFontSize() {
  uni.showActionSheet({
    itemList: ['小', '中', '大'],
    success: (res) => {
      const sizes = ['small', 'medium', 'large']
      settings.value.display.fontSize = sizes[res.tapIndex]
      saveSettings()
      
      uni.showToast({
        title: '设置已更新',
        icon: 'success'
      })
    }
  })
}

// 选择语言
function selectLanguage() {
  uni.showActionSheet({
    itemList: ['简体中文', '繁体中文', 'English'],
    success: (res) => {
      const languages = ['zh_CN', 'zh_TW', 'en_US']
      settings.value.display.language = languages[res.tapIndex]
      saveSettings()
      
      uni.showToast({
        title: '设置已更新',
        icon: 'success'
      })
    }
  })
}

// 清除缓存
function clearCache() {
  uni.showModal({
    title: '清除缓存',
    content: '确定要清除应用缓存吗？这不会删除您的账号数据。',
    success: (res) => {
      if (res.confirm) {
        // 实际应用中，这里需要调用清除缓存的API
        setTimeout(() => {
          uni.showToast({
            title: '缓存已清除',
            icon: 'success'
          })
        }, 1000)
      }
    }
  })
}

// 关于应用
function showAbout() {
  uni.navigateTo({
    url: '/pages/mine/about'
  })
}

// 用户协议
function showUserAgreement() {
  uni.navigateTo({
    url: '/pages/mine/user-agreement'
  })
}

// 隐私政策
function showPrivacyPolicy() {
  uni.navigateTo({
    url: '/pages/mine/privacy-policy'
  })
}

// 返回上一页
function goBack() {
  try {
    uni.navigateBack({
      fail: () => {
        // 如果返回失败，则跳转到首页
        uni.switchTab({
          url: '/pages/index'
        })
      }
    })
  } catch (e) {
    console.error('返回上一页失败', e)
    // 尝试使用switchTab跳转到首页
    try {
      uni.switchTab({
        url: '/pages/index'
      })
    } catch (err) {
      console.error('跳转首页失败', err)
    }
  }
}
</script>

<template>
  <view class="container">
    <view class="header">
      <view class="back-button" @tap="goBack">
        <text class="back-icon">〈</text>
      </view>
      <view class="title">设置</view>
      <view class="header-placeholder"></view>
    </view>
    
    <view class="settings-list">
      <!-- 通知设置 -->
      <view class="settings-section">
        <view class="section-title">通知设置</view>
        
        <view class="settings-item">
          <text class="item-label">推送通知</text>
          <switch 
            :checked="settings.notifications.pushEnabled" 
            @change="toggleSetting('notifications', 'pushEnabled')"
            color="#1890ff"
          />
        </view>
        
        <view class="settings-item" v-if="settings.notifications.pushEnabled">
          <text class="item-label">健康提醒</text>
          <switch 
            :checked="settings.notifications.healthReminder" 
            @change="toggleSetting('notifications', 'healthReminder')"
            color="#1890ff"
          />
        </view>
        
        <view class="settings-item" v-if="settings.notifications.pushEnabled">
          <text class="item-label">活动通知</text>
          <switch 
            :checked="settings.notifications.activityNotice" 
            @change="toggleSetting('notifications', 'activityNotice')"
            color="#1890ff"
          />
        </view>
        
        <view class="settings-item" v-if="settings.notifications.pushEnabled">
          <text class="item-label">系统消息</text>
          <switch 
            :checked="settings.notifications.systemMessage" 
            @change="toggleSetting('notifications', 'systemMessage')"
            color="#1890ff"
          />
        </view>
      </view>
      
      <!-- 隐私设置 -->
      <view class="settings-section">
        <view class="section-title">隐私设置</view>
        
        <view class="settings-item">
          <text class="item-label">健康数据共享</text>
          <switch 
            :checked="settings.privacy.shareHealthData" 
            @change="toggleSetting('privacy', 'shareHealthData')"
            color="#1890ff"
          />
        </view>
        
        <view class="settings-item">
          <text class="item-label">位置服务</text>
          <switch 
            :checked="settings.privacy.locationService" 
            @change="toggleSetting('privacy', 'locationService')"
            color="#1890ff"
          />
        </view>
        
        <view class="settings-item">
          <text class="item-label">数据收集</text>
          <switch 
            :checked="settings.privacy.dataCollection" 
            @change="toggleSetting('privacy', 'dataCollection')"
            color="#1890ff"
          />
        </view>
      </view>
      
      <!-- 显示设置 -->
      <view class="settings-section">
        <view class="section-title">显示设置</view>
        
        <view class="settings-item">
          <text class="item-label">深色模式</text>
          <switch 
            :checked="settings.display.darkMode" 
            @change="toggleSetting('display', 'darkMode')"
            color="#1890ff"
          />
        </view>
        
        <view class="settings-item" @tap="selectFontSize">
          <text class="item-label">字体大小</text>
          <view class="item-value">
            <text>{{ settings.display.fontSize === 'small' ? '小' : settings.display.fontSize === 'medium' ? '中' : '大' }}</text>
            <text class="arrow">></text>
          </view>
        </view>
        
        <view class="settings-item" @tap="selectLanguage">
          <text class="item-label">语言</text>
          <view class="item-value">
            <text>{{ settings.display.language === 'zh_CN' ? '简体中文' : settings.display.language === 'zh_TW' ? '繁体中文' : 'English' }}</text>
            <text class="arrow">></text>
          </view>
        </view>
      </view>
      
      <!-- 其他设置 -->
      <view class="settings-section">
        <view class="section-title">其他设置</view>
        
        <view class="settings-item" @tap="clearCache">
          <text class="item-label">清除缓存</text>
          <view class="item-value">
            <text class="arrow">></text>
          </view>
        </view>
        
        <view class="settings-item" @tap="showAbout">
          <text class="item-label">关于应用</text>
          <view class="item-value">
            <text class="version">v{{ settings.about.version }}</text>
            <text class="arrow">></text>
          </view>
        </view>
        
        <view class="settings-item" @tap="showUserAgreement">
          <text class="item-label">用户协议</text>
          <view class="item-value">
            <text class="arrow">></text>
          </view>
        </view>
        
        <view class="settings-item" @tap="showPrivacyPolicy">
          <text class="item-label">隐私政策</text>
          <view class="item-value">
            <text class="arrow">></text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .back-button {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .back-icon {
      font-size: 36rpx;
      color: #333;
    }
  }
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    flex: 1;
    text-align: center;
  }
  
  .header-placeholder {
    width: 60rpx;
  }
}

.settings-list {
  padding: 20rpx;
}

.settings-section {
  margin-bottom: 30rpx;
  border-radius: 12rpx;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  
  .section-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    padding: 20rpx 30rpx;
    border-bottom: 1px solid #f0f0f0;
  }
}

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1px solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:active {
    background-color: #f9f9f9;
  }
  
  .item-label {
    font-size: 28rpx;
    color: #333;
  }
  
  .item-value {
    display: flex;
    align-items: center;
    
    .version, text {
      font-size: 26rpx;
      color: #999;
      margin-right: 10rpx;
    }
    
    .arrow {
      font-family: 'Arial';
      font-size: 28rpx;
      font-weight: 300;
      transform: scale(1.2);
      color: #999;
    }
  }
}
</style>